<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <!-- <button @click="unzipAndReadFiles">预览</button> -->
    <!-- <img :src="url" width="100%" /> -->
    <!-- <object type="/aijs/README.md" width="100%" height="100%"></object> -->

    <!-- <el-tree :data="tree1" @node-click="handleNodeClick"></el-tree> -->
    <ul class="file_review_list">
      <li v-for="(item, keys, index) in tree1">
        {{ item }}
      </li>
    </ul>
  </div>
</template>
<script>
import JSZip from "jszip";
export default {
  data() {
    return {
      fileData: [],
      tree1: [],
      // defaultProps: {
      //   children: "children",
      // },
    };
  },
  methods: {
    handleNodeClick() {},
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        this.unzipAndReadFiles(file);
        // this.unzipFile(file);
      }
    },

    // 解压文件
    unzipFile(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        JSZip.loadAsync(e.target.result).then((zip) => {
          this.processZip(zip);
        });
      };
      reader.readAsArrayBuffer(file);
    },

    // 处理zip对象
    async processZip(zip, path = "") {
      console.log("zip", zip);
      const fileData = [];
      this.fileData = fileData;
      // 遍历zip中的每个文件
      zip.forEach((relativePath, zipEntry) => {
        if (zipEntry.dir) {
          // 如果是文件夹，检查是否为空
          if (!this.isEmptyFolder(zip, relativePath)) {
            // 递归处理嵌套的zip文件
            if (relativePath.endsWith(".zip")) {
              zipEntry.async("blob").then((blob) => {
                JSZip.loadAsync(blob).then((nestedZip) => {
                  this.processZip(nestedZip, path + relativePath);
                });
              });
            } else {
              // 非空文件夹，添加到文件数据中
              fileData.push({ path: path + relativePath, folder: true });
            }
          }
        } else {
          // 如果是文件，添加到文件数据中
          fileData.push({ path: path + relativePath, folder: false });
        }
      });
      // 处理完毕后的文件数据
      console.log(fileData);
    },

    // 检查文件夹是否为空
    isEmptyFolder(zip, folderPath) {
      const folderRegex = new RegExp(`^${folderPath}[^/]+/?$`);
      const files = Object.keys(zip.files).filter((filePath) => {
        return folderRegex.test(filePath);
      });
      return files.length === 0;
    },

    // 解压文件夹
    async unzipAndReadFiles(zipFile, path = "") {
      try {
        // 创建一个JSZip实例
        const zip = new JSZip();
        // 使用JSZip加载压缩包
        const zipData = await zip.loadAsync(zipFile);
        console.log("zipData", zipData);
        // 获取压缩包内的文件列表
        const fileNames = Object.keys(zipData.files);
        let files = zipData.files;
        // 遍历 ZIP 文件中的所有文件
        let fileList = [];
        // 初始化空树
        let tree1 = [];
        let tree = {};
        // 遍历文件路径

        zipData.forEach((relativePath, zipEntry) => {
          console.log('relativePath',relativePath);
          if (zipEntry.dir == false) {
            // 如果是文件夹，检查是否为空
            if (!this.isEmptyFolder(zip, relativePath)) {
              // 递归处理嵌套的zip文件
              if (relativePath.endsWith(".zip")) {
                // zipEntry.async("blob").then((blob) => {
                //   JSZip.loadAsync(blob).then((nestedZip) => {
                //     this.processZip(nestedZip, path + relativePath);
                //   });
                // });
              } else {
                // 非空文件夹，添加到文件数据中
                tree.push({ path: path + relativePath, folder: true });
              }
            }
          } else {
            // 如果是文件，添加到文件数据中
            tree.push({ path: path + relativePath, folder: false });
          }
        });

        fileNames.forEach((path) => {
          let parts = path.split("/"); // 假设使用'/'作为分隔符
          let currentNode = tree; // 从根节点开始
          // 遍历目录部分
          // for (let i = 0; i < parts.length; i++) {
          for (let i = 0; i < parts.length - 1; i++) {
            let dirName = parts[i];
            if (!currentNode[dirName]) {
              currentNode[dirName] = {}; // 如果目录不存在，则创建它
            }
            currentNode = currentNode[dirName]; // 移动到下一个目录
          }

          // 处理文件名（作为最后一个部分）
          let fileName = parts[parts.length - 1];
          if (!currentNode.children) {
            currentNode.children = []; // 初始化文件列表（如果尚不存在）
          }
          if (fileName != "") {
            currentNode.children.push(fileName);
          }
        });
        tree1.push(tree);
        this.tree1 = tree1;

        console.log("tree1", this.tree1); // 输出树状结构

        // 遍历文件列表并获取文件内容
        for (const fileName of fileNames) {
          const file = zipData.files[fileName].name;
          // 如果不是文件夹
          if (!zipData.files[fileName].dir) {
            // 判断是否是图片格式
            if (/\.(png|jpg|jpeg|gif)$/.test(zipData.files[fileName].name)) {
              const base = zipData
                .file(zipData.files[fileName].name)
                .async("base64"); // 将图片转化为base64格式
              base.then((res) => {
                // 解压后的文件放到dataList数组，可直接在image标签中展示
                fileList.push({
                  fileName: zipData.files[fileName].name,
                  type: "img",
                  content: `data:image/png;base64,${res}`,
                });
              });
            }
            // 判断是否是文本文件
            if (/\.(txt|markdown|md)$/.test(zipData.files[fileName].name)) {
              const base = zipData
                .file(zipData.files[fileName].name)
                .async("string"); // 以字符串形式输出文本内容
              base.then((res) => {
                // 解压后的文件放到dataList数组
                fileList.push({
                  fileName: zipData.files[fileName].name,
                  type: "text",
                  content: res,
                });
              });
            }
            // 判断是否是音频
            if (/\.(video)$/.test(zipData.files[fileName].name)) {
              const base = zipData
                .file(zipData.files[fileName].name)
                .async("string"); // 以字符串形式输出文本内容
              base.then((res) => {
                // 解压后的文件放到dataList数组
                fileList.push({
                  fileName: zipData.files[fileName].name,
                  type: "video",
                  content: res,
                });
              });
            }
        },
        async unzipAndReadFiles(zipFile) {
            try {
                const zip = new JSZip();
                const zipData = await zip.loadAsync(zipFile); // 解压文件
                const fileNames = Object.keys(zipData.files); // 文件全路径列表
                let filePaths = [];
                let tree = []; // 初始化空树

                console.log(zipData);

                let root = {
                    name: "",
                    depth: 0,
                    fullPath: "",
                    isDir: true,
                    children: [],
                };
                for (let path of fileNames) {
                    let parts = path.split("/").filter((part) => part !== ""); // 排除空字符串部分
                    if (root.name === "" && parts.length > 0) {
                        root.name = parts[0]; // 设置根节点名称为第一个非空路径的名称
                        root.fullPath = parts[0]; // 设置根节点全路径为第一个非空路径的名称
                    }
                    let currentNode = root;
                    for (let i = 1; i < parts.length; i++) {
                        let dirName = parts[i];
                        let existingNode = currentNode.children.find(
                            (node) => node.name === dirName
                        );
                        if (!existingNode) {
                            let newNode = {
                                name: dirName,
                                depth: i,
                                fullPath: parts.slice(0, i + 1).join("/"),
                                isDir: i < parts.length - 1,
                                children: [],
                            };
                            currentNode.children.push(newNode);
                            currentNode = newNode;
                        } else {
                            currentNode = existingNode;
                        }
                    }
                }
                console.log( root);
                // console.log(fileNames);
                // console.log("tree", tree); // 输出树状结构
            } catch (error) {
                console.error("解压缩出错：", error);
            }
        },
        // 解压文件夹
        async unzipAndReadFiles1(zipFile) {
            try {
                // 创建一个JSZip实例
                const zip = new JSZip();
                // 使用JSZip加载压缩包
                const zipData = await zip.loadAsync(zipFile);
                // 获取压缩包内的文件列表
                const fileNames = Object.keys(zipData.files);
                let files = zipData.files;
                console.log(files);
                // TODO
                for (let i = 0; i < files.length; i++) {
                    console.log(i);
                }
                // if (i.dir == true) {
                //   // fileNames.forEach((path) => {
                //   //   let parts = path.split("/"); // 假设使用'/'作为分隔符
                //   //   let currentNode = tree; // 从根节点开始
                //   //   // 遍历目录部分
                //   //   // for (let i = 0; i < parts.length; i++) {
                //   //   for (let i = 0; i < parts.length - 1; i++) {
                //   //     let dirName = parts[i];
                //   //     if (!currentNode[dirName]) {
                //   //       currentNode[dirName] = {}; // 如果目录不存在，则创建它
                //   //     }
                //   //     currentNode = currentNode[dirName]; // 移动到下一个目录
                //   //   }
                //   //   // 处理文件名（作为最后一个部分）
                //   //   let fileName = parts[parts.length - 1];
                //   //   if (!currentNode.children) {
                //   //     currentNode.children = []; // 初始化文件列表（如果尚不存在）
                //   //   }
                //   //   if (fileName != "") {
                //   //     currentNode.children.push(fileName);
                //   //   }
                //   // });
                // } else {
                // }

                let fileList = [];
                // 初始化空树
                let tree = {};
                // 遍历文件路径
                // fileNames.forEach((path) => {
                //   let parts = path.split("/"); // 假设使用'/'作为分隔符
                //   let currentNode = tree; // 从根节点开始
                //   // 遍历目录部分
                //   // for (let i = 0; i < parts.length; i++) {
                //   for (let i = 0; i < parts.length - 1; i++) {
                //     let dirName = parts[i];
                //     if (!currentNode[dirName]) {
                //       currentNode[dirName] = {}; // 如果目录不存在，则创建它
                //     }
                //     currentNode = currentNode[dirName]; // 移动到下一个目录
                //   }

                //   // 处理文件名（作为最后一个部分）
                //   let fileName = parts[parts.length - 1];
                //   if (!currentNode.children) {
                //     currentNode.children = []; // 初始化文件列表（如果尚不存在）
                //   }
                //   if (fileName != "") {
                //     currentNode.children.push(fileName);
                //   }
                // });

                // console.log("tree", tree); // 输出树状结构

                // 遍历文件列表并获取文件内容
                for (const fileName of fileNames) {
                    const file = zipData.files[fileName].name;
                    // 如果不是文件夹
                    if (!zipData.files[fileName].dir) {
                        // 判断是否是图片格式
                        if (
                            /\.(png|jpg|jpeg|gif)$/.test(
                                zipData.files[fileName].name
                            )
                        ) {
                            const base = zipData
                                .file(zipData.files[fileName].name)
                                .async("base64"); // 将图片转化为base64格式
                            base.then((res) => {
                                // 解压后的文件放到dataList数组，可直接在image标签中展示
                                fileList.push({
                                    fileName: zipData.files[fileName].name,
                                    type: "img",
                                    content: `data:image/png;base64,${res}`,
                                });
                            });
                        }
                        // 判断是否是文本文件
                        if (
                            /\.(txt|markdown|md)$/.test(
                                zipData.files[fileName].name
                            )
                        ) {
                            const base = zipData
                                .file(zipData.files[fileName].name)
                                .async("string"); // 以字符串形式输出文本内容
                            base.then((res) => {
                                // 解压后的文件放到dataList数组
                                fileList.push({
                                    fileName: zipData.files[fileName].name,
                                    type: "text",
                                    content: res,
                                });
                            });
                        }
                        // 判断是否是音频
                        if (/\.(video)$/.test(zipData.files[fileName].name)) {
                            const base = zipData
                                .file(zipData.files[fileName].name)
                                .async("string"); // 以字符串形式输出文本内容
                            base.then((res) => {
                                // 解压后的文件放到dataList数组
                                fileList.push({
                                    fileName: zipData.files[fileName].name,
                                    type: "video",
                                    content: res,
                                });
                            });
                        }

                        // 判断是否是音频
                        if (
                            /\.(docx|xlsx|ppt|pdf)$/.test(
                                zipData.files[fileName].name
                            )
                        ) {
                            const base = zipData
                                .file(zipData.files[fileName].name)
                                .async("string"); // 以字符串形式输出文本内容
                            base.then((res) => {
                                // 解压后的文件放到dataList数组
                                fileList.push({
                                    fileName: zipData.files[fileName].name,
                                    type: "office",
                                    content: res,
                                });
                            });
                        }
                    }
                }
            } catch (error) {
                console.error("解压缩出错：", error);
            }
        },
        // 寻找最长数组的长度
        findLongestLength(arrays) {
            let longestArray = arrays.reduce(
                (prev, current) =>
                    prev.length > current.length ? prev : current,
                []
            );
            return longestArray.length;
        },
    },
    computed: {},
    filters: {},
    watch: {},
};
</script>

<style lang="scss" scoped>
ul {
  li {
    text-align: left;
  }
}
</style>
